<template>
    <div class="application-records-container">
        <h2 class="page-title">应聘记录管理</h2>

        <!-- 筛选卡片 -->
        <el-card class="filter-card">
            <div class="filter-content">
                <div class="filter-row">
                    <!-- 学历筛选 -->
                    <div class="filter-item">
                        <span class="filter-label">学历：</span>
                        <el-select
                            v-model="filters.education"
                            placeholder="请选择学历"
                            style="width: 180px"
                            clearable
                        >
                            <el-option label="大专" value="college"></el-option>
                            <el-option label="本科" value="bachelor"></el-option>
                            <el-option label="硕士" value="master"></el-option>
                            <el-option label="博士" value="phd"></el-option>
                        </el-select>
                    </div>

                    <!-- 出生日期筛选 -->
                    <div class="filter-item">
                        <span class="filter-label">出生日期：</span>
                        <el-date-picker
                            v-model="filters.birthDateStart"
                            type="date"
                            placeholder="开始日期"
                            style="width: 150px"
                            value-format="YYYY-MM-DD"
                        />
                        <span class="date-separator">至</span>
                        <el-date-picker
                            v-model="filters.birthDateEnd"
                            type="date"
                            placeholder="结束日期"
                            style="width: 150px"
                            value-format="YYYY-MM-DD"
                        />
                    </div>

                    <!-- 薪资范围筛选 -->
                    <div class="filter-item">
                        <span class="filter-label">薪资范围：</span>
                        <el-select
                            v-model="filters.salaryRange"
                            placeholder="请选择薪资范围"
                            style="width: 180px"
                            clearable
                        >
                            <el-option label="5k以下" value="0-5"></el-option>
                            <el-option label="5k-10k" value="5-10"></el-option>
                            <el-option label="10k-20k" value="10-20"></el-option>
                            <el-option label="20k以上" value="20-"></el-option>
                        </el-select>
                    </div>

                    <!-- 工作经验筛选 -->
                    <div class="filter-item" v-if="showExperience">
                        <span class="filter-label">工作经验：</span>
                        <el-select
                            v-model="filters.experience"
                            placeholder="请选择工作经验"
                            style="width: 180px"
                            clearable
                        >
                            <el-option label="无经验" value="0"></el-option>
                            <el-option label="1-3年" value="1-3"></el-option>
                            <el-option label="3-5年" value="3-5"></el-option>
                            <el-option label="5年以上" value="5+"></el-option>
                        </el-select>
                    </div>
                </div>

                <div class="filter-actions">
                    <el-button @click="resetFilters">重置</el-button>
                    <el-button type="primary" @click="search">查询</el-button>
                    <el-button
                        link
                        type="primary"
                        class="toggle-experience"
                        @click="toggleExperience"
                    >
                        {{ showExperience ? '收起' : '展开' }}
                    </el-button>
                </div>
            </div>
        </el-card>

        <!-- 表格卡片 -->
        <el-card class="table-card">
            <div class="table-header">
                <div class="table-title"></div>
                <div class="table-actions">
                    <!-- 刷新按钮 -->
                    <div class="action-item" @mouseenter="showTooltip('刷新')" @mouseleave="hideTooltip">
                        <el-button :icon="Refresh" text @click="handleRefresh" />
                        <div v-if="tooltipContent === '刷新'" class="custom-tooltip">刷新</div>
                    </div>

                    <!-- 密度设置 -->
                    <div class="action-item">
                        <el-dropdown trigger="click" @command="handleDensityChange">
                            <el-button :icon="Menu" text />
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item
                                        command="default"
                                        :class="{ 'active': tableSize === 'default' }"
                                    >
                                        <el-icon v-if="tableSize === 'default'"><Check /></el-icon>
                                        默认
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        command="medium"
                                        :class="{ 'active': tableSize === 'medium' }"
                                    >
                                        <el-icon v-if="tableSize === 'medium'"><Check /></el-icon>
                                        中等
                                    </el-dropdown-item>
                                    <el-dropdown-item
                                        command="small"
                                        :class="{ 'active': tableSize === 'small' }"
                                    >
                                        <el-icon v-if="tableSize === 'small'"><Check /></el-icon>
                                        紧凑
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>

                    <!-- 列设置 -->
                    <div class="action-item">
                        <el-popover placement="bottom" width="200" trigger="click">
                            <template #reference>
                                <el-button :icon="Setting" text />
                            </template>
                            <div class="column-settings">
                                <div class="column-header">
                                    <span>列显示/隐藏</span>
                                    <el-button link type="primary" @click="checkAllColumns">全选</el-button>
                                </div>
                                <el-checkbox-group v-model="checkedColumns">
                                    <div v-for="column in columnOptions" :key="column.value" class="column-item">
                                        <el-checkbox :value="column.value">
                                            {{ column.label }}
                                        </el-checkbox>
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </el-popover>
                    </div>
                </div>
            </div>

            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    :size="tableSize"
                    v-loading="loading"
                    border
                    stripe
                    highlight-current-row
                    empty-text="暂无数据"
                >
                    <el-table-column
                        v-if="showColumn('id')"
                        prop="id"
                        label="序号"
                        width="80"
                        align="center"
                    />
                    <el-table-column
                        v-if="showColumn('username')"
                        prop="username"
                        label="用户名"
                        width="120"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        v-if="showColumn('position')"
                        prop="position"
                        label="职位"
                        width="150"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        v-if="showColumn('type')"
                        prop="type"
                        label="类型"
                        width="120"
                    />
                    <el-table-column
                        v-if="showColumn('result')"
                        prop="result"
                        label="最终结果"
                        width="120"
                    />
                    <el-table-column
                        v-if="showColumn('note')"
                        prop="note"
                        label="备注"
                        width="200"
                        show-overflow-tooltip
                    />
                    <el-table-column
                        v-if="showColumn('deliveryTime')"
                        prop="deliveryTime"
                        label="投递时间"
                        width="180"
                    />
                    <el-table-column label="操作" width="120" fixed="right" align="center">
                        <template #default>
                            <el-button size="small" type="primary">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Refresh, Menu, Setting, Check } from '@element-plus/icons-vue'

// 表格数据
const tableData = ref([])
const loading = ref(false)

// 筛选条件
const filters = ref({
    education: '',
    birthDateStart: '',
    birthDateEnd: '',
    salaryRange: '',
    experience: ''
})

// 工作经验筛选显示控制
const showExperience = ref(true)

// 表格密度控制
const tableSize = ref('default')

// 列显示控制
const columnOptions = [
    { value: 'id', label: '序号' },
    { value: 'username', label: '用户名' },
    { value: 'position', label: '职位' },
    { value: 'type', label: '类型' },
    { value: 'result', label: '最终结果' },
    { value: 'note', label: '备注' },
    { value: 'deliveryTime', label: '投递时间' }
]

const checkedColumns = ref(columnOptions.map(col => col.value))

// 工具提示
const tooltipContent = ref('')
const tooltipTimeout = ref(null)

const showTooltip = (content) => {
    clearTimeout(tooltipTimeout.value)
    tooltipContent.value = content
}

const hideTooltip = () => {
    tooltipTimeout.value = setTimeout(() => {
        tooltipContent.value = ''
    }, 200)
}

const showColumn = (colName) => {
    return checkedColumns.value.includes(colName)
}

// 方法
const resetFilters = () => {
    filters.value = {
        education: '',
        birthDateStart: '',
        birthDateEnd: '',
        salaryRange: '',
        experience: ''
    }
}

const search = () => {
    loading.value = true
    console.log('Search with filters:', filters.value)
    // 模拟异步请求
    setTimeout(() => {
        loading.value = false
    }, 1000)
}

const toggleExperience = () => {
    showExperience.value = !showExperience.value
}

const handleRefresh = () => {
    loading.value = true
    console.log('Refresh table data')
    // 模拟刷新
    setTimeout(() => {
        loading.value = false
    }, 800)
}

const handleDensityChange = (size) => {
    tableSize.value = size
}

const checkAllColumns = () => {
    if (checkedColumns.value.length === columnOptions.length) {
        checkedColumns.value = []
    } else {
        checkedColumns.value = columnOptions.map(col => col.value)
    }
}
</script>

<style scoped>
.application-records-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
}

.page-title {
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 20px;
    color: #333;
    font-weight: 500;
}

/* 筛选卡片样式 */
.filter-card {
    width: 100%;
    margin-bottom: 20px;
}

.filter-content {
    padding: 10px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
}

.filter-item {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: calc(25% - 20px);
}

.filter-label {
    white-space: nowrap;
    margin-right: 10px;
    color: #606266;
    font-size: 14px;
}

.date-separator {
    margin: 0 10px;
    color: #606266;
}

.filter-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.toggle-experience {
    padding: 0;
    margin-left: 10px;
}

/* 表格卡片样式 */
.table-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
}

.table-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.table-actions {
    display: flex;
    gap: 16px;
}

.action-item {
    position: relative;
    display: flex;
    align-items: center;
}

.table-wrapper {
    flex: 1;
    overflow: hidden;
}

/* 列设置样式 */
.column-settings {
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.column-item {
    margin: 8px 0;
}

/* 自定义工具提示 */
.custom-tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #303133;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 2000;
    pointer-events: none;
    white-space: nowrap;
    animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(5px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* 下拉菜单选中样式 */
.el-dropdown-menu .active {
    color: #409EFF;
    font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .filter-item {
        min-width: calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    .filter-item {
        min-width: 100%;
    }

    .filter-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .toggle-experience {
        margin-left: 0;
        margin-top: 5px;
    }

    .custom-tooltip {
        top: -35px;
        font-size: 11px;
        padding: 4px 8px;
    }
}
</style>